<template>
    <div class="content">
        <Form ref="formValidate" :model="form" :label-width="100">
            <div class="formBox" style="margin-bottom:20px">
                <div class="formBox-item">
                    <FormItem label="菜肴编号:" prop="name">
                        <Input v-model="form.name" maxlength=20 clearable placeholder="请输入菜肴编号" style="width: 200px">
                        </Input>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="菜肴名称:" prop="code">
                        <Input v-model="form.code" maxlength=20 clearable placeholder="请输入菜肴名称" style="width: 200px">
                        </Input>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="菜肴类别:" prop="topCode">
                        <Select v-model="form.topCode" style="width:200px" placeholder="请选择菜肴类别" clearable>
                            <Option value="1">类别1</Option>
                            <Option value="2">类别2</Option>
                            <Option value="3">类别3</Option>
                        </Select>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="常用状态:" prop="topCode">
                        <Select v-model="form.topCode" style="width:200px" placeholder="请选择常用状态" clearable>
                            <Option value="1">常用状态1</Option>
                            <Option value="2">常用状态2</Option>
                            <Option value="3">常用状态3</Option>
                        </Select>
                    </FormItem>
                </div>
                <cusButton class="mr_20" type="primary" @onClick="onInit()">查询</cusButton>
                <cusButton class="mr_20" type="primary" @onClick="reset()">重置</cusButton>
            </div>
        </Form>
        <div class="content-bottom">
            <div class="tableBox">
                <Table border :loading="loading" :columns="columns" :data="data">
                    <template slot-scope="{ row }" slot="operation">
                        <div class="flex">
                            <cus-button type="text" size="small" :style="{color: 'green',padding: '0 8px'}" @onClick="onDetail(row)">
                                查看食材
                            </cus-button>
                            <cus-button type="text" size="small" :style="{color: '#1E6FFF',padding: '0 8px'}"  @onClick="onEdit(row)">
                                添加食材
                            </cus-button>
                            <cus-button type="text" size="small" :style="{color: '#1E6FFF',padding: '0 8px'}"  @onClick="onEdit(row)">
                                添加子BOM
                            </cus-button>
                        </div>
                    </template>
                </Table>
                <div style="width: 100%;display: flex;justify-content: flex-end">
                    <cus-page :data="pages" class="mt_10" @pageChange="getRowMealListApi"></cus-page>
                </div>
            </div>
        </div>
        <!-- 添加、编辑菜肴 -->
        <!-- <addDishesModal ref="addDishesModal"></addDishesModal> -->
    </div>
</template>

<script>
import {
    uploadNutritionTag
} from '@/api/business/baseManage';
// import addDishesModal from "./components/addDishesModal";
export default {
    // components: { addDishesModal },
    data() {
        return {
            ruleValidate: {},
            form: {
                name: '', // 单位名称
                code: '', // 单位代码
                topCode: '', // 上级单位代码
                address: '', // 部队驻地
            },
            loading: false,
            data: [
                { name: '伙食费标准', num: 32.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 1 },
                { name: '其他伙食标准', num: 1.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 0 },
                { name: '军粮定量', num: 2.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 1 },
                { name: '粮食补助', num: 32, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 0 },
                { name: '燃料费', num: 32.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 0 },
                { name: '调料费', num: 50.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 1 }
            ],
            columns: [
                {
                    title: '序号',
                    width: 70,
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '菜肴编码',
                    key: 'code',
                    align: 'center',
                },
                {
                    title: '菜肴名称',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '菜肴类别',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '图片',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '常用状态',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '新增食材',
                    key: 'price',
                    align: 'center'
                },
                {
                    title: '操作',
                    width: 250,
                    fixed: 'right',
                    slot: 'operation',
                    align: 'center'
                },
            ],
            pages: {
                page: 1,
                pageSize: 20,
                pageTotal: 0
            },
        };
    },
    mounted() {
        
    },
    methods: {
        // 初始化
        onInit() {},
        // 重置搜索
        reset() {
            this.$refs['formValidate'].resetFields();
            this.onInit();
        },
        // 导出
        onExport() {},
        // 添加
        onAdd() {
            this.$refs['addDishesModal'].show()
        },
        // 导入
        onImport() {
            this.$refs['cusUploadNutritionTagModal'].show()
        },
        // 营养标签
        onDetail() {},
        // 编辑
        onEdit(row) {
            this.$refs['addDishesModal'].form.id = row.id;
            this.$refs['addDishesModal'].show()
        },
    },
};
</script>
<style scoped>
/deep/.ivu-input-icon {
    height: 40px!important;
    line-height: 40px!important;
}
</style>
<style lang="less" scoped>
    .content {
        padding: 20px;
        &-bottom {
            background: #fff;
            border-radius: 4px;
            box-shadow: 1px 1px 2px 0px rgba(153,182,199,0.2); 
            padding: 20px;
        }
    }

    .formBox {
        width: 100%;
        background: #fff;
        border-radius: 4px;
        box-shadow: 1px 1px 2px 0px rgba(153,182,199,0.2);
        padding: 20px 20px 1px;
        display: flex;
        flex-wrap: wrap;
        &-item {
            margin-right: 48px;
        }
    }
    .mr_20 {
        margin-right: 20px;
    }

    .btnBox {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }
</style>
